<template>
    <div class="reservationRecord">
      <div class="header">
        <van-nav-bar title="我的记录" fixed left-text="返回" right-text left-arrow @click-left="onClickLeft"/>
      </div>
      <div class="recordDetails_con">
        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="text"
          @load="onLoad"
          :offset="100"
        >
          <ul>
            <li v-for="(item,index) in recordData.list"  :key="index">
              <div class="recordDetails_con_head" @click="link(item)">
                <img :src="item.logo_url"/>
                <p class="recordDetails_con_head_span">{{item.shopName}}</p>
                <div>
                  <van-icon name="arrow" />
                </div>
              </div>
              <div class="recordDetails_con_con">
                <img :src="item.product_image_url"/>
                <div class="recordDetails_con_con_title">
                  <p>{{item.product_name}}</p>
                  <span>￥{{item.price}}</span>
                  <span>{{item.quantity}}间</span>
                </div>
              </div>
              <div class="recordDetails_con_foot">
                <p>订单状态：<span>已付款</span></p>
                <p>订单号码：<span>{{item.serial_number}}</span></p>
                <p>付款时间：<span>{{item.create_time}}</span></p>
                <p>联系电话：<span>{{item.client_tel}}</span></p>
              </div>
            </li>
          </ul>
        </van-list>
      </div>
    </div>
</template>

<script>
    export default {
        name: "reservationRecord",
      data() {
        return {
          recordData:[],
          recordDataList:[],
          //下拉刷新
          isLoading: false,
          //上拉加载
          loading: false,
          finished: false,
          pageNum: 1,
          text:'',
        };
      },
      mounted() {
           this.getReservationRecordData()
      },
      methods: {
        //  返回上一层
        onClickLeft() {
          console.warn('finish');
          this.$router.go(-1);
        },
        //跳回预订信息页面
        link(item){
          //  this.$toast("应该是跳回预订信息页面");
          let u = navigator.userAgent;
          let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
          let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
          let params={
            //ecologyhostel 店铺ID
            ecologyhostel:item.shop_id
          };
          if (isAndroid) {
            window.location.href='ecologyhostel://='+item.shop_id
          } else if (isiOS) {
            window.webkit.messageHandlers.reservationRecordLink.postMessage(params);
          }
        },
        //获取预订记录信息
        async getReservationRecordData() {
          let params = {
            pageNum: this.pageNum,
            pageSize:10,
          };
          const res = await this.$axios.post(this.$api.ReservationRecordData, params);
          if (res.success) {
            if (this.loading) {
              this.recordDataList = this.recordDataList.concat(res.data.list);
              this.recordData = res.data;
              this.recordData.list = this.recordDataList;
              if (this.recordData.list.length >= this.recordData.total) {
                this.finished = true;
              } else {
                this.pageNum++;
              }
            } else {
              this.recordData = res.data;
              if (this.recordData.list.length >= this.recordData.total) {
                this.finished = true;
                this.text='没有更多了'
              }
            }
            this.isLoading = false;
            this.loading = false;
          } else {
            this.$toast(res.msg);
          }
        },
        //下拉刷新
        onRefresh() {
          this.finished = false;
          this.recordDataList=[];
          this.pageNum=1;
          this.getReservationRecordData()
        },
        //上拉加载
        onLoad() {
          if (this.recordData.list && this.recordData.list.length > 0) {
            this.getReservationRecordData();

          }
        },
      }
    }
</script>

<style scoped>
  .header{width: 100%;}
  .recordDetails_con{width: 100%;margin-top: 0.57rem;}
  .recordDetails_con ul li{margin:0.16rem;background-color: #fff;border-radius: 0.1rem; }
  .recordDetails_con_head{line-height: 0.47rem;overflow: hidden;border-bottom: 1px solid #f7f7f7;width: 90%;margin: 0 auto;}
  .recordDetails_con_head img{float: left;margin-top:0.11rem;width: 0.25rem;height: 0.25rem;margin-right: 0.13rem;border-radius: 1rem;}
  .recordDetails_con_head_span{color: #000;width: 77%;float: left;font-size: 0.14rem;}
  .recordDetails_con_head div{float: right;width: 10%;}
  .recordDetails_con_head div i{font-size: 0.16rem;padding: 0.155rem 0;float: right;}
  .recordDetails_con_con{overflow: hidden;border-bottom: 1px solid #f7f7f7;width: 90%;margin: 0 auto;}
  .recordDetails_con_con img{float: left;margin-top:0.16rem;width: 0.66rem;height: 0.66rem;margin-right: 0.15rem;border-radius: 0.1rem;}
  .recordDetails_con_con_title{float: left;width: 71%;padding: 0.3rem 0 0.23rem;}
  .recordDetails_con_con_title p{font-size: 0.15rem;color: #000;padding-bottom: 0.1rem;}
  .recordDetails_con_con_title span:nth-child(2){color: #ff202f;font-size: 0.11rem;}
  .recordDetails_con_con_title span:nth-child(3){color: #000;font-size: 0.15rem;float: right;}
  .recordDetails_con_foot{width: 90%;margin: 0 auto;padding: 0.15rem 0;}
  .recordDetails_con_foot p{font-size: 0.13rem;color: #808080;line-height: 0.2rem;}
  .recordDetails_con_foot p span{font-size: 0.13rem;color: #000;}
</style>

